// import { useState, useEffect } from "react";
// import axios from "axios";

// function useGetPost() {
//   const [post, setPost] = useState({});
//   useEffect(() => {
//     axios
//       .get("https://www.fastmock.site/mock/13089f924ad68903046c5a61371475c4/api/post")
//       .then((res) => setPost(res.data));
//   }, []);
//   return [post, setPost];
// }

// function App() {
//   const [post, setPost] = useGetPost();

//   return (
//     <div>
//       <h1>{post.title}</h1>
//       <div>{post.body}</div>
//       <button onClick={() => setPost({ title: "linduidui", body: "林怼怼爱怼人" })}>设置文章</button>
//     </div>
//   );
// }

// export default App;

// import { useState } from "react";

// function useUpdateInput(initialValue) {
//   const [value, setValue] = useState(initialValue);
//   return {
//     value,
//     onChange: (event) => setValue(event.target.value),
//   };
// }

// function App() {
//   const usernameInput = useUpdateInput("");
//   const passwordInput = useUpdateInput("");

//   //  点击submit时可以从对象.value拿到对应表单框的值
//   const submitForm = (event) => {
//     event.preventDefault();
//     console.log(usernameInput.value);
//     console.log(passwordInput.value);
//   };

//   return (
//     <form onSubmit={submitForm}>
//       <input type="text" name="username" {...usernameInput} />
//       <input type="password" name="password" {...passwordInput} />
//       <input type="submit" />
//     </form>
//   );
// }
// export default App;

import { useState, useEffect } from "react";

function useList() {
  const [list, setList] = useState(null);
  useEffect(() => {
    ajax("/list").then((list) => {
      setList(list);
    });
  }, []);
  return {
    list,
    setList,
    addItem(name) {
      setList([...list, { id: Math.random(), name: name }]);
    },
    deleteIndex(index) {
      setList(list.slice(0, index).concat(list.slice(index + 1)));
    },
  };
}
function ajax() {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      resolve([
        { id: "1", name: "yun" },
        { id: "2", name: "Jack" },
        { id: "3", name: "Alice" },
        { id: "4", name: "Bob" },
      ]);
    }, 1000);
  });
}

export default function App() {
  const { list, setList, addItem, deleteIndex } = useList();
  return (
    <div className="App">
      <h1>List</h1>
      {list ? (
        <ol>
          {list.map((item, index) => (
            <li key={item.id}>
              {item.name}
              <button
                onClick={() => {
                  deleteIndex(index);
                }}
              >
                x
              </button>
            </li>
          ))}
        </ol>
      ) : (
        "加载中..."
      )}
      <button
        onClick={() => {
          setList([
            { id: "1", name: "yunmu" },
            { id: "2", name: "linduidui" },
          ]);
        }}
      >
        setList
      </button>
      <button
        onClick={() => {
          addItem("linduidui");
        }}
      >
        addItem
      </button>
      <button
        onClick={() => {
          deleteIndex(2);
        }}
      >
        deleteIndex2
      </button>
    </div>
  );
}
